<template>
  <div>
    <div class="row">
      <sy-button>默认按钮</sy-button>
      <sy-button type="primary">主要按钮</sy-button>
      <sy-button type="success">成功按钮</sy-button>
      <sy-button type="info">信息按钮</sy-button>
      <sy-button type="warning">警告按钮</sy-button>
      <sy-button type="danger">危险按钮</sy-button>
    </div>
    <div class="row">
      <sy-button plain>朴素按钮</sy-button>
      <sy-button plain>主要按钮</sy-button>
      <sy-button plain type="success">成功按钮</sy-button>
      <sy-button plain type="info">信息按钮</sy-button>
      <sy-button plain type="warning">警告按钮</sy-button>
      <sy-button plain type="danger">危险按钮</sy-button>
    </div>
    <div class="row">
      <sy-button round>圆角按钮</sy-button>
      <sy-button round type="primary">主要按钮</sy-button>
      <sy-button round type="success">成功按钮</sy-button>
      <sy-button round type="info">信息按钮</sy-button>
      <sy-button round type="warning">警告按钮</sy-button>
      <sy-button round type="danger">危险按钮</sy-button>
    </div>
    <div class="row">
      <sy-button disabled>禁用按钮</sy-button>
      <sy-button type="primary" disabled>主要按钮</sy-button>
      <sy-button type="success" disabled>成功按钮</sy-button>
      <sy-button type="info" disabled>信息按钮</sy-button>
      <sy-button type="warning" disabled>警告按钮</sy-button>
      <sy-button type="danger" disabled>危险按钮</sy-button>
    </div>
    <div class="row">
      <sy-button circle icon="user"></sy-button>
      <sy-button circle icon="success" type="primary"></sy-button>
      <sy-button circle icon="s-comment" type="success"></sy-button>
      <sy-button circle icon="s-tools" type="info"></sy-button>
      <sy-button circle icon="trophy" type="warning"></sy-button>
      <sy-button circle icon="delete" type="danger"></sy-button>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
  .sy-button {
    margin-right: 10px;
  }
}
.sy-input {
  width: 200px;
}
</style>
